<template>
	<button @click="showRemoteChild = true">加载远程组件</button>
	<RemoteChild v-if="showRemoteChild" />
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";

const showRemoteChild = ref(false);
const componentBaseUrl = 'http://localhost:8010/dist/'; // 指向编译后的 JS 组件目录

// 使用动态 import() 加载预编译的 JS 组件
const RemoteChild = defineAsyncComponent(async () => {
	const module = await import(/* @vite-ignore */ `${componentBaseUrl}remote-component.js`);
	return module.default; // 返回默认导出的组件
});
</script>
